<template>
  <div class="weui-panel full" @click="playSound">
    <div class="weui-tab">
      <div class="weui-navbar" v-if="recordType">
        <a class="weui-navbar__item" v-for="(item) in navBarItems"
          :key="item.name" :class="{'weui-bar__item--on': recordType === item.query}" @click="activeChanged(item)">
            {{item.name}}
        </a>
      </div>
      <div class="weui-tab__bd">
        <div class="weui-tab__bd-item weui-tab__bd-item--active" ref="list">
          <div class="weui-cell weui-flex list-title">
            <div class="weui-flex__item" v-for="(t, index) in listTitle" :key="index">{{t}}</div>
          </div>

          <div class="weui-cell weui-flex" v-for="(source, index) in listData" :key="index">
            <div class="weui-flex__item">
              <img class="list-user-img" :src="source.headUrl" alt="">
            </div>
            <div class="weui-flex__item">
              <p class="nickname-text">{{source.nickname}}</p>
              <p>{{source.lftid}}</p>
            </div>
            <div class="weui-flex__item">
              {{source.price}}
              <!-- <img src="img/diamonds-b.png" alt="" class="sell-diamonds">{{source.price}} -->
            </div>
            <div class="weui-flex__item">
              <p class="info-grey">{{source._date}}</p> 
              <p>{{source._time}}</p>
            </div>
          </div>

          <div class="no-data" v-show="!listData.length && !loading">暂无数据</div>

          <div class="weui-loadmore" v-show="loading">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WeuiNavBar from '../../components/WeuiNavBar'
import { mapState } from 'Vuex'
export default {
  data() {
    return {
      navBarItems: [{name: '今日', query: 1}, {name: '昨日', query: 4}, {name: '本月', query: 2}, {name: '上月', query: 3}],
      listTitle: ['头像', '昵称/ID', '消费金额(元)', '时间'],
      listData: [],
      loading: false,
      offset: 0,
      limit: 50,
      noMore: false,
      recordType: 2,
      hideBP: true,
      source: {},
    }
  },
  mounted() {
    if (this.$route.query.types) {
      this.recordType = parseInt(this.$route.query.types)
    }
    this.hideBP = window.hideBP;
    this.source = this.$route.params;
    console.log(this.$route.params)
    // this.fakeData()
    this.query()
    this.initInfinite()
  },
  methods: {
    playSound() {
      window.btn_sound.play();
    },
    toTwoFifth(val) {
      if(this.hideBP) {
        return val;
      } else {
        return Math.ceil(val * 2 / 5);
      }
    },
    fakeData() {
      this.listData = [{nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}, {nickname: '3'}]
    },
    initInfinite() {
      const listHeight = document.body.offsetHeight - 60 + 'px'
      Object.assign(this.$refs.list.style, { height: listHeight, 'overflow-y': 'auto' })
      $(this.$refs.list).infinite().on('infinite', () => {
        if (this.loading) {
          return
        }
        this.offset += this.limit
        this.query()
      });
    },
    activeChanged(item) {
      this.recordType = item.query
      this.offset = 0
      if (this.noMore) {
        this.initInfinite()
        this.noMore = false
      }
      this.listData.length = 0
      this.offset = 0
      this.limit = 50
      this.query()
    },
    query() {
      const send = {
        areaCode: this.areaCode,
        token: this.token,
        recordType: this.recordType,
        limit: this.limit,
        offset: this.offset,
        uid: this.source.uid,
      }
      console.log('send', send)
      this.loading = true
      this.api.diamondsDetail.getUserDetail(send).then(res => res.json()).then(data => {
        console.log(data)
        this.loading = false
        if (data.errorCode) {
          $(this.$refs.list).destroyInfinite()
          return
        }
        if (!data.source) {
          data.source = []
          // data.source = [{headUrl: './img/tutu.png', nickname: 'nick', lftid: '12344', price: 1234, time: 1504752547000}]
        }
        this.noMore = data.source.length === 0
        if (this.noMore) {
          $(this.$refs.list).destroyInfinite()
        }
        data.source.forEach(source => {
          source._date = util.getDate(source.time)
          source._time = util.getTime(source.time)
        });
        this.listData = this.listData.concat(data.source)
      })
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode'])
  },
  components: {
    WeuiNavBar
  }
}

</script>

<style lang="less">

</style>